<template>
  <view class="short-video">
    <text
      v-if="pagesLen >= 2"
      class="nav-back"
      :style="{ top: topHeight + 'px' }"
      @click="handleBack"
    ></text>
    <text
      :class="['nav-home', { dark: dark }]"
      v-else
      @click="handleHome"
    ></text>

    <view  :style="{ 
      'top': positionFollowPromptTop + 'px', 
       'position': 'absolute',
       'z-index': '2',   }"  v-show="isShowPositionFollowBox">
      <PositionFollowPromptBox 
      :sharePersonId="sharePersonId"
      :shareChannel="shareChannel"
      :info="positionFollowPromptInfo" 
      @addToCollectionSuccess="addToCollectionSuccess"
       @setPositionFollowBoxVisiable="setPositionFollowBoxVisiable"/>
    </view>
 
    <image class="morePositionImgStyle" 
      v-show="isShowMorePositionImg"
     @click="onClickMorePositionImg"/>

    <VideoItemVX
      :videoInfo="videoInfo"
      :showComment="false"
      :showCollect="false"
      :showFollow="false"
      @comment="handleCommentShow"
      @update="updateVideo"
      @authorClick="handleAuthorClick"
      @follow="handleFollow"
    >
    </VideoItemVX>
 
    <u-popup
      v-model="showComment"
      closeable
      safe-area-inset-bottom
      mode="bottom"
    >
      <view class="comment-wrap">
        <view class="wrap-top u-border-bottom">
          {{ totalComments }}条评论
        </view>
        <scroll-view
          scroll-y
          style="height: 57vh"
          class="wrap-middle"
          @scrolltolower="loadMoreComment"
        >
          <Comment
            v-for="(item, index) in commentList"
            :key="item.commentId"
            :item="item"
            @more="onMoreChildComment(item, index)"
            @like="onLike($event, index)"
            @comment="handleCommentClick($event, index)"
          ></Comment>
          <view v-if="!commentList.length" class="empty">
            <Empty :baseImg="emptyImg" label="快来发表你的评论吧"></Empty>
          </view>
        </scroll-view>
        <view class="wrap-bottom u-border-bottom">
          <view class="bottom-show" @click="handleShowMask">
            <text class="icon icon-edit"></text>
            <text class="placeholder">我来说两句…</text>
            <text class="icon icon-emoji"></text>
          </view>
        </view>
      </view>
    </u-popup>
    <u-mask :show="showMask" z-index="10076" @click="handleMaskClick">
      <view class="send-wrap" @tap.stop>
        <view class="comment-send-wrap">
          <view class="comment-send">
            <!-- <text class="icon icon-edit"></text> -->
            <u-input
              type="textarea"
              class="input-comment"
              cursor-spacing="10"
              v-model="sendText"
              maxlength="200"
              :show-confirmbar="false"
              :placeholder="
                selectedComment.personName
                  ? '回复@' + selectedComment.personName
                  : '我来说两句...'
              "
            >
            </u-input>
            <view @click="handleSendModeClick">
              <text v-if="sendMode == 'text'" class="icon icon-emoji"></text>
              <text
                v-if="sendMode == 'emoji'"
                class="icon icon-keyboard"
              ></text>
            </view>
          </view>
          <view v-show="sendText" @click="handleSendComment" class="btn-send">
            确定
          </view>
        </view>
        <scroll-view v-show="faceVisible" scroll-y class="face-scroll">
          <view class="face-wrap">
            <view
              class="face-item"
              v-for="(item, index) in faceList"
              :key="index"
              @click="strToEmoji(item.title)"
            >
              <image
                class="face-item-img"
                :src="item.src"
                :title="item.title"
              />
            </view>
          </view>
        </scroll-view>
      </view>
    </u-mask>
  </view>
</template>

<script>
import { VideoItemVX } from "../components/VideoItemVX";
import Empty from "@/components/Empty";
import Comment from "../components/Comment";
import MyTextarea from "../components/MyTextarea.vue";
import PositionFollowPromptBox from '../components/PositionFollowPromptBox.vue';
import { 
  uploadVideoPlayCount,
} from '@/api/modules/company';
import {
  getCountCommentByDateId,
  getShortVideo,
  getComments,
  getChildComments,
  likeOrCancel,
  addComment,
  focusOrCancel, 
  personCollectInfo, 
  addMessageSubscribe,
} from "@/api/modules/career";

import { faceTypeList } from "@/utils/data";

import ShareMixin from '@/mixins/share';
import ReportShareMixin from "@/mixins/reportShare";
export default {
  mixins: [ShareMixin,ReportShareMixin],
  components: {
    VideoItemVX,
    Empty,
    MyTextarea,
    Comment,
    PositionFollowPromptBox,
  },
  data() {
    return {
      sharePersonId:'',
      shareChannel:'',
      personId: uni.getStorageSync("person-id").slice(2) || "",
      openId: uni.getStorageSync("openid") || "",
      articleId: "",
      videoInfo: {},
      topHeight: getApp().globalData.topHeight,
      pagesLen: 0,
      showComment: false,
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      sendText: "",
      inputFocus: false,
      inputBottom: 0,
      sendMode: "text",
      totalComments: 0,
      showMask: false,
      faceVisible: false,
      faceList: [],
      pageNo: 0,
      commentList: [],
      selectedComment: null,
      updateIndex: "",
      loading: false,
      finished: false,
      option: "",
      isShareArticle: true,
      positionFollowPromptInfo:{},
      relatedType:'0',
      isShowPositionFollowBox:false,
      positionFollowPromptTop:0,
      positionId:'',
      isShowMorePositionImg:false,
      defaultCoverImg:'https://img3.job1001.com/ypMp/elan/images/career/video_default_share_cover.jpg',
    };
  },
  onLoad(opt) {
    this.option = opt;
    if (opt.articleId) {
      this.articleId = opt.articleId;
    }
    if(opt.sharePersonId){
      this.sharePersonId = opt.sharePersonId
      this.shareChannel = opt.shareChannel
    }
    opt && (this.relatedType= opt.relatedType || "0");
    opt && (this.positionId = opt.positionId || '');
    
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#ff0000",
      animation: {
        duration: 400,
        timingFunc: "easeIn",
      },
    });
    this.uploadVideoCount();
  },
  // onShareAppMessage() {
  //   return {
  //     title:  this.videoInfo.content,
  //     path: "/pagesSub/career/video/playSimple?articleId=" + this.articleId + "&relatedType="+this.relatedType + "&positionId="+ this.positionId,
  //     //imageUrl: this.videoInfo.info,
  //     imageUrl: this.defaultCoverImg,
  //   };
  // },
  // onShareTimeline() {
  //   return {
  //     imageUrl: this.defaultCoverImg,
  //     title:  this.videoInfo.content,
  //     path: "/pagesSub/career/video/playSimple?articleId=" + this.articleId + "&relatedType="+this.relatedType + "&positionId="+ this.positionId,
  //   };
  // },
  created() {
    this.pagesLen = getCurrentPages().length;
    this.calculateTop();
    this.getFaceList();
  },
  mounted() {
    this.getShortVideo();
    this.getCountComment();
    this.reqPersonCollectInfo();
  },
  methods: {
    onClickMorePositionImg(){
       this.subscribeMessage();
    },

  // 订阅 通知
  subscribeMessage() { 
      const that = this;
      var ids = "meN3arXkcBxBpGRG81narVRMmqU-jA5i-IXRcs0fPb4";
      uni.getSetting({
        withSubscriptions:true,
        success:function(res){
           if(res.subscriptionsSetting.mainSwitch){ // 用户打开了订阅消息总开关
              if(res.subscriptionsSetting.itemSettings != null){
               
                that.isShowMorePositionImg = false; 
                console.log('this.isShowMorePositionImg',that.isShowMorePositionImg);
                // 用户同意总是保持是否推送消息的选择, 这里表示以后不会再拉起推送消息的授权
                let moIdState = res.subscriptionsSetting.itemSettings[ids];  // 用户同意的消息模板id
                if(moIdState === 'accept'){
                  console.log('已接受订阅消息');
                  showDelayToastTip('之前已设置接受订阅消息', 50);
                }else if(moIdState === 'reject'){
                  console.log("之前已设置拒绝订阅消息");
                  showDelayToastTip('已拒绝订阅消息', 50);
                }else if(moIdState === 'ban'){
                  console.log("已被后台封禁");
                  showDelayToastTip('已被后台封禁', 50);
                }
              }else{
                  // 当用户没有点击 ’总是保持以上选择，不再询问‘  按钮。那每次执到这都会拉起授权弹窗
                  uni.requestSubscribeMessage({
                     tmplIds: [ids],
                     complete: (res) => {
                        console.log("requestSubscribeMessage complete", res);
                        //console.log('requestSubscribeMessage ids',res[''+ ids +'']);
                       var value = res["" + ids + ""];
                       if (value == "accept") {
                       console.log("requestSubscribeMessage value", "accept");
                       // 接受了
                       } else if (value == "reject") {
                       console.log("requestSubscribeMessage value", "reject");
                       // 拒绝了
                      }

                      that.isShowMorePositionImg = false; 
                      console.log('this.isShowMorePositionImg',that.isShowMorePositionImg);
                     },
                   });                  
              }
           }else{
            showDelayToastTip('用户没有打开订阅消息总开关', 50);
           }
        }, 
      });


    },
    addToCollectionSuccess(val){
       this.isShowMorePositionImg = true;
       this.reqAddMessageSubscribe();
    },
 
   // 获取用户关注的信息
   reqPersonCollectInfo() {
      if(this.relatedType != '2'){
        console.log('reqPersonCollectInfo','this.relatedType != 2');
        this.setPositionFollowBoxVisiable(false); 
        return;
      } 
      
      const params = {
        positionId: this.positionId,
        personId: this.personId,
      };
      personCollectInfo(params).then((res) => {
        if (res.code == 200 && res.data) {
          if(res.data.isLogin && res.data.isCollect){
            console.log('reqPersonCollectInfo','已登录已关注的不显示悬浮框');
            this.setPositionFollowBoxVisiable(false); 
            this.isShowMorePositionImg = true; 
          }else{
            console.log('reqPersonCollectInfo','用户登录但是没有关注，或者用户没有登录');
              this.setPositionFollowBoxVisiable(true);
              this.positionFollowPromptInfo ={
                relatedType:this.relatedType, 
                type:2,
                positionId:this.positionId,
               
                isLogin : res.data.isLogin,
                isCollect : res.data.isCollect,
                positionPic: res.data.positionPic,
                positionName:res.data.positionName,

              }; 
          } 
           
        }  
      });
    },
    // 记录消息订阅
    reqAddMessageSubscribe() {
      const params = {
        dataId: this.positionId,
        personId: this.personId,
        openId: this.openId,
        //pushType 推送类型 10：报告  20：案例 30 ：职讯  40 ：短视频
        pushType:  40  ,
      };
      addMessageSubscribe(params).then((res) => {
        console.log("reqAddMessageSubscribe", res);
      });
    },
    setPositionFollowBoxVisiable(val){
        console.log('translateAnimation setPositionFollowBoxVisiable',val);
        this.isShowPositionFollowBox = val;
    },
    calculateTop() {
      var target = this.pagesLen>=2 ? '.nav-back' : '.nav-home';
      uni
        .createSelectorQuery()
        .in(this)
        .select(target)
        .boundingClientRect((rect) => {
          console.log("rect", rect);
          rect && (this.positionFollowPromptTop = rect.bottom);
        })
        .exec();
    },

    getShortVideo() {
      const params = {
        personId: this.personId,
        articleId: this.articleId,
      };
      getShortVideo(params).then((res) => {
        if (res.code == 200) {
          this.videoInfo = res.data;
          this.shareTitle = this.videoInfo.content;
          this.shareContent.contentTitle = this.videoInfo.content
          this.shareContent.contentType = '40'
          this.shareContent.contentId = this.articleId
          this.setShareInfo();
          if (this.personId) {
            this.getComments();
          }
        }
      });
    },

    // 统计播放数
    uploadVideoCount() {
      const params = {
        article_id: this.articleId,
        person_id: this.personId,
        tracking_type: "clicks",
      };
      uploadVideoPlayCount(params).then((res) => {
        if (res) {
          console.log("🚀 ~ file: playSimple.vue:234 ~ uploadVideoPlayCount ~ res:", res)
        }
      });
    },


    // 评论列表
    getComments(isMore) {
      if (this.loading || this.finished) return;
      this.loading = true;

      const params = {
        dataId: this.articleId,
        pageNo: this.pageNo,
        pageSize: 10,
        moduleType: "SHORT_VIDEO_MODULE_TYPE",
        modulePersonId: this.videoInfo.ownId,
        currentPersonId: this.personId,
      };
      getComments(params)
        .then((res) => {
          if (res.code == 200) {
            let data = res.data || [];
            data = data.map((item) => {
              item.commContent = this.changeToEmoji(item.commContent);
              item.children = []; // 列表子评论列表有问题，不完善
              return item;
            });
            if (isMore) {
              this.commentList.push(...res.data);
            } else {
              this.commentList = res.data;
            }
            if (this.pageNo >= res.pageparam.pages) {
              this.finished = true;
            }
            this.pageNo++;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 评论后更新列表
    updateComments(comment) {
      comment.commContent = this.changeToEmoji(comment.commContent);
      comment.children = [];
      comment.finished = false;
      if (this.selectedComment) {
        this.commentList[this.updateIndex].children.push(comment);
      } else {
        this.commentList.unshift(comment);
      }
      this.selectedComment = null;
    },

    getCountComment() {
      const params = {
        dataId: this.articleId,
      };
      getCountCommentByDateId(params).then((res) => {
        if (res.code == 200) {
          this.totalComments = res.data.commentCount;
        }
      });
    },
    handleBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    handleHome() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    handleCommentShow() {
      this.showComment = !this.showComment;
      if (this.showComment) {
        this.refresh();
      }
    },
    refresh() {
      this.pageNo = 0;
      this.finished = false;
      this.commentList = [];
      this.getComments();
      this.getCountComment();
    },
    handleBoardChange(height) {
      this.inputBottom = height;
      this.toBottom();
    },
    handleSendComment() {
      this.addComment();
    },

    // 表情数组
    getFaceList() {
      let face = faceTypeList;
      face.forEach((item, index) => {
        this.faceList.push({
          title: item,
          src: `//j.job1001.com/yl1001plugin/YL1001Editor/kindeditor-4.1.10/plugins/emoticons/images/${index}.gif`,
        });
      });
    },
    // 表情包插入输入框
    strToEmoji(title) {
      this.sendText += title;
    },

    // 发送模式：表情/文本
    handleSendModeClick() {
      this.faceVisible = !this.faceVisible;
      if (this.faceVisible) {
        this.inputFocus = false;
        this.sendMode = "emoji";
      } else {
        this.inputFocus = true;
        this.sendMode = "text";
      }
    },

    // 加载更多子评论
    onMoreChildComment(item, index) {
      let pageNo = 0;
      if (item.pageNo) {
        pageNo = item.pageNo;
      } else {
        this.$set(this.commentList[index], "pageNo", pageNo);
      }
      this.getChildComments(
        {
          commentId: item.commentId,
          pageNo: pageNo,
        },
        index
      );
    },
    // 获取子评论
    getChildComments(params, index) {
      Object.assign(params, {
        modulePersonId: this.videoInfo.ownId,
        currentPersonId: this.personId,
        dataId: this.articleId,
        pageSize: 10,
      });
      getChildComments(params).then((res) => {
        if (res.code == 200) {
          let data = res.data || [];
          data = data.map((item) => {
            item.commContent = this.changeToEmoji(item.commContent);
            return item;
          });
          const item = this.commentList[index];
          if (item.pageNo == 0) {
            item.children = data;
          } else {
            item.children.push(...data);
          }
          this.$set(this.commentList[index], "hideBtn", true);
          if (data.length) {
            item.pageNo++;
          }
          if (item.pageNo > res.pageparam.pages) {
            this.$set(item, "finished", true);
          }
        }
      });
    },
    changeToEmoji(cont) {
      var that = this;
      var reg = /\[.+?\]/g;
      let str;
      str = cont.replace(reg, function (a) {
        let index = that.faceList.findIndex((ele) => ele.title == a);
        if (index > -1) {
          return (
            '<img class="emoji" style="vertical-align: -6px;" src="' +
            that.faceList[index].src +
            '"/>'
          );
        } else {
          return a;
        }
      });
      return str;
    },

    // 点赞
    onLike(data, index) {
      let isFocus = data.reply.isLike == 1 ? 0 : 1;
      const params = {
        isFocus: isFocus, // 1为关注/点赞,0为取消关注/点赞
        focusType: "20", // 10为关注，20为点赞
        focusUserId: data.reply.personId, // 关注人员工编号主键
        moduleId: data.reply.commentId, // 评论id
        moduleType: "SHORT_VIDEO_MODULE_TYPE",
      };
      likeOrCancel(params).then((res) => {
        if (res.code == 200) {
          if (data.replyIndex) {
            const item = this.commentList[index].children[data.replyIndex];
            item.isLike = isFocus;
            item.likeCount = item.likeCount + (isFocus ? 1 : -1);
          } else {
            this.commentList[index].isLike = isFocus;
          }
        }
      });
    },

    handleMaskClick() {
      this.showMask = false;
    },

    // 点击评论
    handleCommentClick(data, index) {
      if (data) {
        this.selectedComment = data.reply;
        this.updateIndex = index;
      } else {
        this.selectedComment = null;
      }
      this.showMask = true;
    },

    // 发表评论
    addComment() {
      if (!this.sendText) return;

      const params = {
        dataId: this.articleId,
        personId: this.personId,
        personName: this.selectedComment ? this.selectedComment.personName : "",
        personPhono: this.selectedComment
          ? this.selectedComment.personPhono
          : "",
        commContent: this.sendText,
        parentId: this.selectedComment ? this.selectedComment.commentId : "0",
        moduleType: "SHORT_VIDEO_MODULE_TYPE",
        modulePersonId: this.videoInfo.ownId,
      };
      this.sendText = "";
      this.showMask = false;
      addComment(params).then((res) => {
        if (res.code == 200) {
          this.updateComments(res.data);
        }
      });
    },

    // 加载更多主评论
    loadMoreComment() {
      this.getComments(true);
    },

    updateVideo(data) {
      if (data.operateType == "favorite") {
        if (data.type == "add") {
          this.videoInfo.isFavorite = "1";
          this.videoInfo.cCnt++;
        } else {
          this.videoInfo.isFavorite = "0";
          this.videoInfo.cCnt--;
        }
      } else if (data.operateType == "praise") {
        if (data.type == "add") {
          this.videoInfo.isPraise = "1";
          this.videoInfo.likeCnt++;
        } else {
          this.videoInfo.isPraise = "0";
          this.videoInfo.likeCnt--;
        }
      }
    },

    handleShowMask() {
      if (!this.checkLogin()) return;
      this.showMask = true;
    },

    checkLogin(text = "") {
      if (this.personId) return true;

      let fullPath =
        getCurrentPages()[getCurrentPages().length - 1].$page.fullPath;
      let returnUrl = encodeURIComponent(fullPath);

      uni.showModal({
        title: "提示",
        content: (text || "该") + "功能需要登录",
        success: function (res) {
          if (res.confirm) {
            uni.navigateTo({
              url: "/pagesSub/public/loginMode/index?returnUrl=" + returnUrl,
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
      return false;
    },

    handleAuthorClick() {
      if (this.option && this.option.form == "index") {
        uni.navigateBack();
      } else {
        uni.navigateTo({
          url: "/pagesSub/career/consultant/index?id=" + this.videoInfo.ownId,
        });
      }
    },

    handleFollow() {
      if (!this.checkLogin("关注")) return;

      let focusType = 1;
      if(this.videoInfo.isFocusUser) {
        focusType = 0;
      } else {
        focusType = 1;
      }
      const params = {
        uid: this.personId,
        followUid: this.videoInfo.ownId,
        focusType,
      };
      focusOrCancel(params).then(res => {
        if(res.code == 200) {
          this.videoInfo.isFocusUser = focusType;
        }
        uni.showToast({
          title: res.status_desc,
          icon: 'none'
        });
      })
    },
    setShareInfo() {
      this.shareTitle =  this.videoInfo.title;
      this.sharePath = "/pagesSub/career/video/play?articleId="+ this.articleId+ "&relatedType="+this.relatedType  ;
      //this.imageUrl = this.videoInfo.info;
      this.imageUrl = this.defaultCoverImg;
      this.shareQuery = 'articleId='+ this.articleId + "&relatedType="+this.relatedType  ;
      if(this.positionId && this.positionId !=''){
        this.sharePath += "&positionId="+ this.positionId;
        this.shareQuery += "&positionId="+ this.positionId;
      }
    },
    // 页面分享统计, 在shareMixin里调用
    shareArticle() {
      const info = {
        shareType: '2', // share_type 分享类型 1：文章 2：视频
        articleId: this.articleId,
      };
      this.shareArticleInfo(info); // from shareMixin
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-back {
  position: absolute;
  left: 0;
  top: 5%;
  padding: 28rpx;
  width: 44rpx;
  height: 44rpx;
  background: url($img-base + "back.png") no-repeat center center;
  background-size: 44rpx 44rpx;
  box-sizing: content-box;
  z-index: 2;
}
.nav-home {
  position: absolute;
  left: 0;
  top: 5%;
  padding: 28rpx;
  width: 44rpx;
  height: 44rpx;
  background: url($img-base + "home.png") no-repeat center center;
  background-size: 44rpx 44rpx;
  box-sizing: content-box;
  z-index: 2;
}
::v-deep .player-progress {
  .u-slider__button-wrap {
    padding: 20rpx;
  }
}

.comment-wrap {
  .wrap-top {
    padding-left: 32rpx;
    height: 106rpx;
    line-height: 106rpx;
    font-size: 36rpx;
    font-weight: 800;
    color: #222222;
  }
  .wrap-middle {
    padding: 0 32rpx;
    box-sizing: border-box;
  }
  .wrap-bottom {
    height: 120rpx;
    padding-top: 24rpx;
    box-shadow: 10rpx -8rpx 20rpx 0px rgba(0, 0, 0, 0.05);
  }

  .empty {
    padding-top: 160rpx;
  }

  .bottom-show {
    display: flex;
    align-items: center;
    margin: 0 32rpx;
    padding: 0 24rpx 0 18rpx;
    height: 72rpx;
    background: #f7f8fa;
    border-radius: 40rpx;
    .placeholder {
      flex: 1;
      margin-left: 20rpx;
      font-size: 28rpx;
      color: #555555;
    }
  }
}

.icon-edit {
  width: 24rpx;
  height: 28rpx;
  background-image: url($img-base + "career/edit.png");
}
.icon-emoji {
  width: 44rpx;
  height: 44rpx;
  background-image: url($img-base + "message/emoji.png");
}
.icon-keyboard {
  width: 44rpx;
  height: 44rpx;
  background-image: url($img-base + "message/keyboard.png");
}
.comment-send-wrap {
  display: flex;
}
.send-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16rpx 24rpx 0 18rpx;
  padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
  background: #fff;
  .comment-send {
    flex: 1;
    display: flex;
    padding: 14rpx 24rpx 14rpx 18rpx;
    background: #f7f8fa;
    border-radius: 40rpx;
    .icon-edit {
      margin-top: 4rpx;
    }
    .input-comment {
      flex: 1;
      margin: -10rpx 20rpx 0 20rpx;
    }
  }

  .btn-send {
    margin-left: 20rpx;
    width: 112rpx;
    height: 68rpx;
    font-size: 32rpx;
    color: #fff;
    line-height: 68rpx;
    background: #f04646;
    border-radius: 36rpx;
    text-align: center;
  }
}

.face-scroll {
  height: 300rpx;
  padding-top: 20rpx;
  .face-wrap {
    display: flex;
    flex-wrap: wrap;
    padding-left: 10rpx;
    .face-item {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      overflow: hidden;
      margin: -2rpx 0 0 -2rpx;
      padding: 8rpx 4rpx;
      text-align: center;
      height: 84rpx;
      width: 84rpx;
      // border: 2rpx solid #e8e8e8;
      &-img {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }
}

.enterStyle {
   animation-name: enterAnimation;
   animation-duration: 2s;
  // animation-iteration-count: 1;
   
}

@keyframes enterAnimation {
  0% {
    opacity: 0;
    transform: translateX(206rpx);
  }
  100% {
    opacity: 1;
    transform: translateX(0rpx);
  }
}
  
.morePositionImgStyle {
    background-image: url($img-base + "career/icon_more_position_info_block.png");
    position: fixed;
    bottom: 30vh;
    background-size: 100% 100%;
    right: 0; 
    width: 206rpx;
    height: 290rpx; 
    animation-name: enterAnimation;
    animation-duration: 1s;
    z-index: 2;
  }
 
::v-deep .input-comment {
  .u-input__textarea {
    min-height: 20rpx !important;
    max-height: 100rpx;
  }
}

::v-deep comment:last-child {
  .comment {
    padding-bottom: 24rpx;
    .reply-list .comment {
      padding-bottom: 0;
    }
  }
}
</style>